<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe</title>
  </head>
  <body>
    <h1>iframe 内嵌框架</h1>

    <h2>内嵌网页</h2>
    <iframe src="https://www.arryblog.com" width="800" height="600" frameborder="0" name="myIframe" loading="lazy" title="arry老师的博客"></iframe>

    <h2>内嵌图片</h2>
    <iframe src="https://sce7a2b9c9d95a-sb-qn.qiqiuyun.net/files/course/2024/08-27/2052535547fa551878.png" width="800" height="300" frameborder="0"></iframe>

    <h2>嵌入第三方服务</h2>
    <iframe height="498" width="510" src="https://player.youku.com/embed/XNjM2MzAzNzUyOA==" frameborder="0"></iframe>

    <h2>嵌入地图</h2>
    <iframe
      src="https://j.map.baidu.com/aa/5NJ"
      width="600"
      height="450"
      style="border: 0"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
    ></iframe>

    <h2>嵌入广告或第三方内容</h2>
    <iframe
      src="https://huodong.taobao.com/wow/a/act/tao/dailygroup/23509/24308/wupr?spm=a21bo.jianhua/a.banner.d1.5af92a895B8bah&wh_pid=daily-565955&disableNav=YES&status_bar_transparent=true&custom_content_source=a2113w.30197676"
      width="1000"
      height="550"
      sandbox="allow-same-origin allow-scripts"
      title="广告"
    ></iframe>

    <h2>JavaScript 控制 iframe</h2>
    <script>
      function changeURL() {
        var iframe = document.getElementById("myFrame");
        iframe.src = "https://www.arryblog.com";
      }
    </script>
    <input type="button" value="改变URL" onclick="changeURL()" />
    <iframe id="myFrame" src="https://www.icodingedu.com/" width="800" height="600" frameborder="0"></iframe>
  </body>
</html>
